<!doctype html>
<html lang="zh"><head>
<title>UI库-封装PageTable总览 - 糖羽仙</title>
<meta charset="UTF-8">
<meta name="keywords" content="blog ACG JavaScript VUE IT">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">

<link rel="shortcut icon" href="/images/head/head.jpg" type="image/jpeg" />
<meta name="description" content="封装通用型的表格查询工具">
<meta property="og:type" content="article">
<meta property="og:title" content="UI库-封装PageTable总览">
<meta property="og:url" content="https://www.tangyuxian.com/2025/05/29/%E5%89%8D%E7%AB%AF/UI%E5%BA%93/UI%E5%BA%93-%E5%B0%81%E8%A3%85PageTable%E6%80%BB%E8%A7%88/index.html">
<meta property="og:site_name" content="糖羽仙">
<meta property="og:description" content="封装通用型的表格查询工具">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2025-05-29T08:43:45.000Z">
<meta property="article:modified_time" content="2025-11-24T12:56:29.320Z">
<meta property="article:author" content="tangyuxian">
<meta property="article:tag" content="原创">
<meta property="article:tag" content="UI库">
<meta property="article:tag" content="elementPlus">
<meta name="twitter:card" content="summary">

<link rel="stylesheet" href="/lib/fancybox/fancybox.css">
<link rel="stylesheet" href="/lib/mdui_043tiny/mdui.css">


<link rel="stylesheet" href="/lib/iconfont/iconfont.css?v=1763992124048">

    <link rel="stylesheet" href="//at.alicdn.com/t/font_2421060_8z08qcz5sq3.css">

<link rel="stylesheet" href="/css/style.css?v=1763992124048">




    
        <link rel="stylesheet" href="/custom.css?v=1763992124048">
    
        <link rel="stylesheet" href="/themes/umaru/index.css?v=1763992124048">
    
        <link rel="stylesheet" href="/themes/asuka/index.css?v=1763992124048">
    



<script src="/lib/mdui_043tiny/mdui.js" async></script>
<script src="/lib/fancybox/fancybox.umd.js" async></script>
<script src="/lib/lax.min.js" async></script>


<script async src="/js/app.js?v=1763992124048"></script>

 

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1Z7TFL96ZH"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-1Z7TFL96ZH');
</script>


<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
<!-- hexo injector head_end start -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-shiki-plugin@latest/lib/codeblock.css">
<style>:root{--hl-color:#e1e4e8;--hl-bg:#24292e;--hltools-bg:#1f2428;--hltools-color:#c5c5c5;--hlnumber-bg:#24292e;--hlnumber-color:#444d56;--hlscrollbar-bg:#32383e;--hlexpand-bg:linear-gradient(180deg,rgba(36,41,46,0.1),rgba(36,41,46,0.9))}</style><!-- hexo injector head_end end --><meta name="generator" content="Hexo 7.3.0"></head><body class="nexmoe mdui-drawer-body-left"><div id="nexmoe-background"><div class="nexmoe-bg" style="background-image: url(/images/background/xiaomai.jpg)"></div><div class="nexmoe-character"></div><div class="mdui-appbar mdui-shadow-0"><div class="mdui-toolbar"><a class="mdui-btn mdui-btn-icon mdui-ripple" mdui-drawer="{target: &#039;#drawer&#039;, swipe: true}" title="menu"><i class="mdui-icon nexmoefont icon-menu"></i></a><div class="mdui-toolbar-spacer"></div><a class="mdui-btn mdui-btn-icon" href="/" title="tangyuxian"><img src="/images/head/head.jpg" alt="tangyuxian"></a></div></div></div><div id="nexmoe-header"><div class="nexmoe-drawer mdui-drawer" id="drawer">
    <div class="nexmoe-avatar mdui-ripple">
        <a href="/" title="tangyuxian">
            <img src="/images/head/head.jpg" alt="tangyuxian" alt="tangyuxian">
        </a>
    </div>
    <div class="nexmoe-count">
        <div class="nexmoe-count-item"><span>文章</span>84 <div class="item-radius"></div><div class="item-radius item-right"></div> </div>
        <div class="nexmoe-count-item"><span>标签</span>38<div class="item-radius"></div><div class="item-radius item-right"></div></div>
        <div class="nexmoe-count-item"><span>分类</span>5<div class="item-radius"></div><div class="item-radius item-right"></div></div>
    </div>
    <div class="nexmoe-list mdui-list" mdui-collapse="{accordion: true}">
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple false" href="/" title="回到首页">
            <i class="mdui-list-item-icon nexmoefont icon-meishi"></i>
            <div class="mdui-list-item-content">
                回到首页
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple false" href="/archives.html" title="文章归档">
            <i class="mdui-list-item-icon nexmoefont icon-hanbao1"></i>
            <div class="mdui-list-item-content">
                文章归档
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple false" href="/about.html" title="关于糖糖">
            <i class="mdui-list-item-icon nexmoefont icon-jiubei1"></i>
            <div class="mdui-list-item-content">
                关于糖糖
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple false" href="/friend.html" title="我的朋友">
            <i class="mdui-list-item-icon nexmoefont icon-cola"></i>
            <div class="mdui-list-item-content">
                我的朋友
            </div>
        </a>
        
    </div>
    
    
        
        <div class="nexmoe-widget-wrap">
    <div class="nexmoe-widget nexmoe-search">
         
            <form id="search_form" action_e="https://cn.bing.com/search?q=site:tangyuxian.com" onsubmit="return search();">
                <label><input id="search_value" name="q" type="search" placeholder="搜索"></label>
            </form>
         
    </div>
</div>




    
        
        <div class="nexmoe-widget-wrap">
	<div class="nexmoe-widget nexmoe-social">
		<a
			class="mdui-ripple"
			href="http://wpa.qq.com/msgrd?v=3&uin=2120252100&site=qq&menu=yes"
			target="_blank"
			mdui-tooltip="{content: 'QQ'}"
			style="
				color: rgb(64, 196, 255);
				background-color: rgba(64, 196, 255, .1);
			"
		>
			<i
				class="nexmoefont icon-QQ"
			></i> </a
		><a
			class="mdui-ripple"
			href="mailto:tangyuxian@vip.qq.com"
			target="_blank"
			mdui-tooltip="{content: 'mail'}"
			style="
				color: rgb(249,8,8);
				background-color: rgba(249,8,8,.1);
			"
		>
			<i
				class="nexmoefont icon-mail-fill"
			></i> </a
		><a
			class="mdui-ripple"
			href="https://blog.csdn.net/qq_40621378?type=blog"
			target="_blank"
			mdui-tooltip="{content: 'CSDN'}"
			style="
				color: rgb(199,29,35);
				background-color: rgba(199,29,35,.1);
			"
		>
			<i
				class="nexmoefont icon-csdn"
			></i> </a
		><a
			class="mdui-ripple"
			href="https://www.cnblogs.com/lovetangyuxian/"
			target="_blank"
			mdui-tooltip="{content: '博客园'}"
			style="
				color: rgb(66, 214, 29);
				background-color: rgba(66, 214, 29, .1);
			"
		>
			<i
				class="nexmoefont icon-bokeyuan"
			></i> </a
		><a
			class="mdui-ripple"
			href="https://github.com/tangyuxian/"
			target="_blank"
			mdui-tooltip="{content: 'GitHub'}"
			style="
				color: rgb(25, 23, 23);
				background-color: rgba(25, 23, 23, .15);
			"
		>
			<i
				class="nexmoefont icon-github"
			></i> </a
		><a
			class="mdui-ripple"
			href="https://gitee.com/tangyuxian"
			target="_blank"
			mdui-tooltip="{content: 'gitee'}"
			style="
				color: rgb(255, 255, 255);
				background-color: rgb(199,29,35);
			"
		>
			<i
				class="nexmoefont icon-mayun"
			></i> </a
		>
	</div>
</div>

    
        
        
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">文章分类</h3>
    <div class="nexmoe-widget">

      <ul class="category-list">

        


        

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/其它/">其它</a>
          <span class="category-list-count">2</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/前端/">前端</a>
          <span class="category-list-count">62</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/后端/">后端</a>
          <span class="category-list-count">8</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/开发工具/">开发工具</a>
          <span class="category-list-count">11</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/服务器端/">服务器端</a>
          <span class="category-list-count">1</span>
        </li>

        
      </ul>

    </div>
  </div>


    
        
        
  <div class="nexmoe-widget-wrap">
    <div id="randomtagcloud" class="nexmoe-widget tagcloud nexmoe-rainbow">
      <a href="/tags/JavaScript/" style="font-size: 15.56px;">JavaScript</a> <a href="/tags/Jetbrains/" style="font-size: 10px;">Jetbrains</a> <a href="/tags/TypeScript/" style="font-size: 10px;">TypeScript</a> <a href="/tags/UI%E5%BA%93/" style="font-size: 13.33px;">UI库</a> <a href="/tags/centos/" style="font-size: 10px;">centos</a> <a href="/tags/css/" style="font-size: 11.11px;">css</a> <a href="/tags/docker/" style="font-size: 10px;">docker</a> <a href="/tags/echarts/" style="font-size: 10px;">echarts</a> <a href="/tags/elementPlus/" style="font-size: 13.33px;">elementPlus</a> <a href="/tags/es6/" style="font-size: 14.44px;">es6</a> <a href="/tags/git/" style="font-size: 13.33px;">git</a> <a href="/tags/github/" style="font-size: 10px;">github</a> <a href="/tags/html/" style="font-size: 10px;">html</a> <a href="/tags/http/" style="font-size: 13.33px;">http</a> <a href="/tags/java/" style="font-size: 11.11px;">java</a> <a href="/tags/markerdown/" style="font-size: 11.11px;">markerdown</a> <a href="/tags/nginx/" style="font-size: 10px;">nginx</a> <a href="/tags/node/" style="font-size: 13.33px;">node</a> <a href="/tags/vite/" style="font-size: 10px;">vite</a> <a href="/tags/vue/" style="font-size: 18.89px;">vue</a> <a href="/tags/webpack/" style="font-size: 10px;">webpack</a> <a href="/tags/xuex/" style="font-size: 10px;">xuex</a> <a href="/tags/%E4%BA%8B%E4%BB%B6%E6%B5%81/" style="font-size: 10px;">事件流</a> <a href="/tags/%E4%BA%92%E8%81%94%E7%BD%91/" style="font-size: 10px;">互联网</a> <a href="/tags/%E5%8A%A0%E5%AF%86/" style="font-size: 12.22px;">加密</a> <a href="/tags/%E5%8E%9F%E5%88%9B/" style="font-size: 20px;">原创</a> <a href="/tags/%E5%B7%A5%E5%85%B7/" style="font-size: 13.33px;">工具</a> <a href="/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/" style="font-size: 12.22px;">微信小程序</a> <a href="/tags/%E6%80%BB%E7%BB%93/" style="font-size: 13.33px;">总结</a> <a href="/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" style="font-size: 10px;">数据结构</a> <a href="/tags/%E6%9C%8D%E5%8A%A1%E5%99%A8/" style="font-size: 10px;">服务器</a> <a href="/tags/%E6%B5%8F%E8%A7%88%E5%99%A8/" style="font-size: 17.78px;">浏览器</a> <a href="/tags/%E7%AE%97%E6%B3%95/" style="font-size: 14.44px;">算法</a> <a href="/tags/%E7%BC%96%E8%A7%A3%E7%A0%81/" style="font-size: 10px;">编解码</a> <a href="/tags/%E7%BE%8E%E5%8C%96/" style="font-size: 12.22px;">美化</a> <a href="/tags/%E8%A7%86%E9%A2%91/" style="font-size: 11.11px;">视频</a> <a href="/tags/%E8%AE%B0%E5%BD%95/" style="font-size: 11.11px;">记录</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 16.67px;">转载</a>
    </div>
    
      <script>
        var maxTagcloud = parseInt(17);
        var tags_length = parseInt(38);
        var tags_arr = [];
        for(var i = 0; i < tags_length; i++){
          tags_arr.push(i);
        }
        tags_arr.sort(function (l, r) {
          return Math.random() > 0.5 ? -1 : 1;
        });
        tags_arr = tags_arr.slice(0, maxTagcloud < tags_length ? tags_length - maxTagcloud : 0);
        for(var tag_i = 0; tag_i < tags_arr.length; tag_i++){
          document.getElementById("randomtagcloud").children[tags_arr[tag_i]].style.display = 'none';
        }
      </script>
    
  </div>

    
        
        
        
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">文章归档</h3>
    <div class="nexmoe-widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2025/">2025</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/">2023</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/">2022</a><span class="archive-list-count">23</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/">2021</a><span class="archive-list-count">54</span></li></ul>
    </div>
  </div>



    
        
        
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">最新文章</h3>
    <div class="nexmoe-widget">
      <ul>
        
          <li>
            <a href="/2025/11/12/%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/%E7%BE%8E%E5%8C%96/%E7%BE%8E%E5%8C%96-%E7%BD%91%E9%A1%B5%E4%B8%BB%E9%A2%98%E5%88%87%E6%8D%A2%E7%9A%84%E6%B8%90%E5%8F%98%E5%8A%A8%E7%94%BB/">美化-网页主题切换的渐变动画</a>
          </li>
        
          <li>
            <a href="/2025/09/29/%E5%89%8D%E7%AB%AF/css/css-%E8%A1%A8%E6%A0%BCtd%E4%B8%8B%E9%AB%98%E5%BA%A6%E4%B8%A2%E5%A4%B1%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95/">css-表格td下高度丢失解决办法</a>
          </li>
        
          <li>
            <a href="/2025/09/23/%E5%89%8D%E7%AB%AF/vue/vue-%E5%B0%81%E8%A3%85%E5%87%BD%E6%95%B0%E5%BC%8F%E8%A7%A6%E5%8F%91%E5%8F%B3%E9%94%AE%E8%8F%9C%E5%8D%95/">vue-封装函数式触发右键菜单组件</a>
          </li>
        
          <li>
            <a href="/2025/06/04/%E5%89%8D%E7%AB%AF/UI%E5%BA%93/UI%E5%BA%93-ElTooltip%E5%8F%AA%E5%9C%A8%E6%96%87%E5%AD%97%E8%B6%85%E5%87%BA%E8%8C%83%E5%9B%B4%E6%97%B6%E6%98%BE%E7%A4%BA%E7%9A%84%E8%A7%86%E7%BA%BF%E6%96%B9%E5%BC%8F/">UI库-ElTooltip只在文字超出范围时显示的视线方式</a>
          </li>
        
          <li>
            <a href="/2025/05/29/%E5%89%8D%E7%AB%AF/UI%E5%BA%93/UI%E5%BA%93-%E5%B0%81%E8%A3%85PageTable%E6%80%BB%E8%A7%88/">UI库-封装PageTable总览</a>
          </li>
        
      </ul>
    </div>
  </div>

    
        
        <div class="nexmoe-widget-wrap">
    <div class="nexmoe-widget nexmoe-link">
		<ul>
        
            <li>
                <a href="https://tangyuxian.com/" target="_blank" >
                    <img src="https://cdn.tangyuxian.com/PicGoImages/202304272004917.jpg" alt="糖糖第一可爱"></img>
                    <p style="color: var(--color-primary)">糖糖第一可爱</p>
                </a>
            </li>
        
		</ul>
    </div>
</div>
<style>
.nexmoe-widget-wrap .nexmoe-link ul li a {
    text-align : center;
}
.nexmoe-widget-wrap .nexmoe-link ul li a img {
    max-width : 100%;
}
.nexmoe-widget-wrap .nexmoe-link ul li a p {
    margin: 10px 0;
}
</style>

    
   
    <div class="nexmoe-copyright">
        &copy; 2025 tangyuxian
        Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
        & <a href="https://github.com/tangyuxian/hexo-theme-tangyuxian" target="_blank">Tangyuxian</a>
        <br><a target="_blank" href="https://beian.miit.gov.cn/">辽ICP备2021002341号</a>
<div style="font-size: 12px">
   <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
   本站总访问量  <a id="busuanzi_value_site_pv"></a> 次<br />
   本站访客数<a id="busuanzi_value_site_uv"></a>人次
</div>

    </div>
</div><!-- .nexmoe-drawer --></div><div id="nexmoe-content"><div class="nexmoe-primary"><div class="nexmoe-post">
  <article>
    
        <div class="nexmoe-post-cover">
            <img src="/images/post/ui.jpg" alt="UI库-封装PageTable总览" loading="lazy">
            <h1>UI库-封装PageTable总览</h1>
        </div>
        
    
    <div class="nexmoe-post-meta">
    <div class="nexmoe-rainbow">
        <a class="nexmoefont icon-calendar-fill">2025年05月29日</a>
        
            <a class="nexmoefont icon-appstore-fill -link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
        
        
    </div>
    
    
    
    
    
</div>

    <p>封装通用型的表格查询工具</p>
<span id="more"></span>
<h2 id="一-基础工具"><a href="#一-基础工具" class="headerlink" title="一 基础工具"></a>一 基础工具</h2><h4 id="FormTypeEnum-ts"><a href="#FormTypeEnum-ts" class="headerlink" title="FormTypeEnum.ts"></a>FormTypeEnum.ts</h4><figure class="shiki typescript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #6A737D">// 表单类型枚举</span></span>
<span class="line"><span style="color: #F97583">enum</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">FormTypeEnum</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 输入框</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">INPUT</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;input&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 数字输入框</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">INPUT_NUMBER</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;inputNumber&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 有提示气泡的输入框</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">TOOLTIP_INPUT</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;tooltipInput&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 下拉选择</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">SELECT</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;select&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 开关</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">SWITCH</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;switch&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 单选</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">RADIO</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;radio&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 多选</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">SELECT_MULTIPLE</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;selectMultiple&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 自动补全</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">AUTOCOMPLETE</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;autocomplete&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 级联选择</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">CASCADER</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;cascader&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 范围</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">RANGE</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;range&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 日期</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">DATETIME</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;datetime&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// html</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">HTML</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;html&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 操作</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">OPERATION</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;operation&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">export</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">default</span><span style="color: #E1E4E8"> FormTypeEnum;</span></span></code></pre></div></div></figure>
<h4 id="columnUtil-ts"><a href="#columnUtil-ts" class="headerlink" title="columnUtil.ts"></a>columnUtil.ts</h4><figure class="shiki typescript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">type</span><span style="color: #E1E4E8"> {FormColumnType} </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@/typings/column&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> {getDictList} </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@/api/modules/common&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> {deepClone} </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@/utils/util&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 获取处理后的表单列项</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">columns</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">export</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">async</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">function</span><span style="color: #E1E4E8">  </span><span style="color: #B392F0">getFormColumnSync</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">columns</span><span style="color: #F97583">:</span><span style="color: #B392F0">Array</span><span style="color: #E1E4E8">&lt;</span><span style="color: #B392F0">FormColumnType</span><span style="color: #E1E4E8">&gt;){</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">return</span><span style="color: #E1E4E8">  </span><span style="color: #F97583">await</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">Promise</span><span style="color: #E1E4E8">.</span><span style="color: #B392F0">all</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">deepClone</span><span style="color: #E1E4E8">(columns).</span><span style="color: #B392F0">map</span><span style="color: #E1E4E8">(</span><span style="color: #F97583">async</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">column</span><span style="color: #F97583">:</span><span style="color: #B392F0">FormColumnType</span><span style="color: #E1E4E8">)</span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #6A737D">// 有字典时的处理</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">if</span><span style="color: #E1E4E8">(column.dictProp){</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #F97583">if</span><span style="color: #E1E4E8">(</span><span style="color: #F97583">!</span><span style="color: #E1E4E8">column?.options) column.options </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> []</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #F97583">if</span><span style="color: #E1E4E8">(column.options.</span><span style="color: #79B8FF">length</span><span style="color: #F97583">==</span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> (column.options.</span><span style="color: #79B8FF">length</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">===</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">1</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">&amp;&amp;</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">!</span><span style="color: #E1E4E8">column.options[</span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">].value)){</span></span>
<span class="line"><span style="color: #E1E4E8">                </span><span style="color: #6A737D">// @ts-ignore</span></span>
<span class="line"><span style="color: #E1E4E8">                column.options </span><span style="color: #F97583">=</span><span style="color: #E1E4E8">[</span><span style="color: #F97583">...</span><span style="color: #E1E4E8">column.options,</span><span style="color: #F97583">...</span><span style="color: #E1E4E8">((</span><span style="color: #F97583">await</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">getDictList</span><span style="color: #E1E4E8">(column.dictProp))?.data </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> [])?.</span><span style="color: #B392F0">map</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">item</span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">                    </span><span style="color: #F97583">return</span><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">                        label:item.dictName,</span></span>
<span class="line"><span style="color: #E1E4E8">                        value:item.dictCode,</span></span>
<span class="line"><span style="color: #E1E4E8">                        data:item</span></span>
<span class="line"><span style="color: #E1E4E8">                    }</span></span>
<span class="line"><span style="color: #E1E4E8">                })]</span></span>
<span class="line"><span style="color: #E1E4E8">            }</span></span>
<span class="line"><span style="color: #E1E4E8">        }</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> column</span></span>
<span class="line"><span style="color: #E1E4E8">    }))</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 获取处理后的表单列项</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">columns</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">callback</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">export</span><span style="color: #E1E4E8">  </span><span style="color: #F97583">function</span><span style="color: #E1E4E8">  </span><span style="color: #B392F0">getFormColumnAsync</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">columns</span><span style="color: #F97583">:</span><span style="color: #B392F0">Array</span><span style="color: #E1E4E8">&lt;</span><span style="color: #B392F0">FormColumnType</span><span style="color: #E1E4E8">&gt;,</span><span style="color: #B392F0">callback</span><span style="color: #F97583">?:</span><span style="color: #B392F0">Function</span><span style="color: #E1E4E8">){</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">for</span><span style="color: #E1E4E8"> (</span><span style="color: #F97583">let</span><span style="color: #E1E4E8"> column </span><span style="color: #F97583">of</span><span style="color: #E1E4E8"> columns) {</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">if</span><span style="color: #E1E4E8">(column.dictProp){</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #F97583">if</span><span style="color: #E1E4E8">(</span><span style="color: #F97583">!</span><span style="color: #E1E4E8">column?.options) column.options </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> []</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #F97583">if</span><span style="color: #E1E4E8">(column.options.</span><span style="color: #79B8FF">length</span><span style="color: #F97583">==</span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> (column.options.</span><span style="color: #79B8FF">length</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">===</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">1</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">&amp;&amp;</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">!</span><span style="color: #E1E4E8">column.options[</span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">].value)){</span></span>
<span class="line"><span style="color: #E1E4E8">                </span><span style="color: #B392F0">getDictList</span><span style="color: #E1E4E8">(column.dictProp).</span><span style="color: #B392F0">then</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">res</span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">                    </span><span style="color: #6A737D">// @ts-ignore</span></span>
<span class="line"><span style="color: #E1E4E8">                    column.options </span><span style="color: #F97583">=</span><span style="color: #E1E4E8">[</span><span style="color: #F97583">...</span><span style="color: #E1E4E8">column.options,</span><span style="color: #F97583">...</span><span style="color: #E1E4E8">((res?.data </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> [])?.</span><span style="color: #B392F0">map</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">item</span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #F97583">return</span><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">                            label:item.dictName,</span></span>
<span class="line"><span style="color: #E1E4E8">                            value:item.dictCode,</span></span>
<span class="line"><span style="color: #E1E4E8">                            data:item</span></span>
<span class="line"><span style="color: #E1E4E8">                        }</span></span>
<span class="line"><span style="color: #E1E4E8">                    }))]</span></span>
<span class="line"><span style="color: #E1E4E8">                })</span></span>
<span class="line"><span style="color: #E1E4E8">            }</span></span>
<span class="line"><span style="color: #E1E4E8">        }</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">if</span><span style="color: #E1E4E8">(column.asyncFunc){</span></span>
<span class="line"><span style="color: #E1E4E8">            column.</span><span style="color: #B392F0">asyncFunc</span><span style="color: #E1E4E8">(column)</span></span>
<span class="line"><span style="color: #E1E4E8">        }</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #F97583">if</span><span style="color: #E1E4E8">(column.callBackStatus){</span></span>
<span class="line"><span style="color: #E1E4E8">            callback </span><span style="color: #F97583">&amp;&amp;</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">callback</span><span style="color: #E1E4E8">(column)</span></span>
<span class="line"><span style="color: #E1E4E8">        }</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>
<h4 id="column-d-ts"><a href="#column-d-ts" class="headerlink" title="column.d.ts"></a><strong>column.d.ts</strong></h4><figure class="shiki typescript"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> DictEnum </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@/enums/DictEnum&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> FormTypeEnum </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@/enums/FormTypeEnum&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">export</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">declare</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">interface</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">OptionType</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 名称</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">label</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 值</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">value</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">|</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  [</span><span style="color: #FFAB70">prop</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8">]</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">export</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">declare</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">interface</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">TableColumnType</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 名称</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">label</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 单位</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">unit</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 字段</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">prop</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 字典值</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">dictProp</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">DictEnum</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 异步函数</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">asyncFunc</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Function</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 类型是html后启用渲染函数</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">renderHtmlFunc</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Function</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 异步函数回调状态</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">callBackStatus</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">boolean</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 宽度</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">width</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">|</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">number</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 类型(未来改成枚举)</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">type</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">|</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">FormTypeEnum</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 当前表单项是否启用插槽(会返回当前表单列项,字段名和数据)</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">slot</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">boolean</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 自定义插槽类型(用于区分插槽)</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">slotType</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 从当前项插入插槽(完全占位,注意补充一个或多个&lt;el-col :span=&quot;6&quot;&gt;&lt;el-form-item /&gt;&lt;/el-col&gt;插槽内容或其它内容)</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">insertSlot</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">boolean</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 插入插槽的字段名(可选,当表单有多个插入插槽时,用于区分)</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">insertSlotProp</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 是否隐藏当前列</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">isHidden</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">boolean</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 校验规则</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">rules</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Array</span><span style="color: #E1E4E8">&lt;</span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">&gt;;</span></span>
<span class="line"><span style="color: #E1E4E8">  [</span><span style="color: #FFAB70">prop</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8">]</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">export</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">declare</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">interface</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">FormColumnType</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">extends</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">TableColumnType</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 表单字段提示语</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">labelTip</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 方向</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">labelTipPlacement</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 提示语</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">placeholder</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 初始的默认值</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">defaultValue</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 下拉列项</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">options</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Array</span><span style="color: #E1E4E8">&lt;</span><span style="color: #B392F0">OptionType</span><span style="color: #E1E4E8">&gt;;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 栅格化</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">span</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">number</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 限制输入前后空格,只在input情况下有效</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">inputTrim</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">boolean</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 显示tooltip的最大数值长度</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">tooltipShowMaxLength</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">number</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// tooltip 传参</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">tooltipProps</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// input 传参</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">inputProps</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 日期选择器传参</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">datetimerangeProps</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// select 传参</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">selectProps</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// switch 传参</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">switchProps</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// radio 传参</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">radioProps</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// autocomplete 传参</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">autocompleteProps</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// cascader 传参</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">cascaderProps</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span></code></pre></div></div></figure>


<h2 id="二-相关组件"><a href="#二-相关组件" class="headerlink" title="二 相关组件"></a>二 相关组件</h2><h4 id="Pagination-index-vue"><a href="#Pagination-index-vue" class="headerlink" title="Pagination&#x2F;index.vue"></a><strong>Pagination&#x2F;index.vue</strong></h4><figure class="shiki vue"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">  &lt;</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">class</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;Pagination&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">    &lt;</span><span style="color: #85E89D">el-config-provider</span><span style="color: #E1E4E8"> :</span><span style="color: #B392F0">locale</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">zhCn</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">      &lt;</span><span style="color: #85E89D">el-pagination</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #B392F0">v-bind</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">$attrs</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        :</span><span style="color: #B392F0">page-sizes</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">[</span><span style="color: #79B8FF">10</span><span style="color: #E1E4E8">, </span><span style="color: #79B8FF">20</span><span style="color: #E1E4E8">, </span><span style="color: #79B8FF">30</span><span style="color: #E1E4E8">, </span><span style="color: #79B8FF">50</span><span style="color: #E1E4E8">, </span><span style="color: #79B8FF">100</span><span style="color: #E1E4E8">]</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #B392F0">background</span></span>
<span class="line"><span style="color: #E1E4E8">        :</span><span style="color: #B392F0">layout</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">layout</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">      /&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">    &lt;/</span><span style="color: #85E89D">el-config-provider</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">  &lt;/</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">script</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">setup</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">lang</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;ts&quot;</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">name</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;Pagination&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> { ElConfigProvider } </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;element-plus&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> zhCn </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;element-plus/es/locale/lang/zh-cn&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">interface</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">PaginationProps</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">layout</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">props</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">withDefaults</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">defineProps</span><span style="color: #E1E4E8">&lt;</span><span style="color: #B392F0">PaginationProps</span><span style="color: #E1E4E8">&gt;(), {</span></span>
<span class="line"><span style="color: #E1E4E8">  layout: </span><span style="color: #9ECBFF">&quot;total,sizes, prev, pager, next&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">});</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;/</span><span style="color: #85E89D">script</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">style</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">scoped</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">lang</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;scss&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #B392F0">.Pagination</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;/</span><span style="color: #85E89D">style</span><span style="color: #E1E4E8">&gt;</span></span></code></pre></div></div></figure>
<h4 id="SearchForm-index-vue"><a href="#SearchForm-index-vue" class="headerlink" title="SearchForm&#x2F;index.vue"></a><strong>SearchForm&#x2F;index.vue</strong></h4><figure class="shiki vue"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br><span class="line">372</span><br><span class="line">373</span><br><span class="line">374</span><br><span class="line">375</span><br><span class="line">376</span><br><span class="line">377</span><br><span class="line">378</span><br><span class="line">379</span><br><span class="line">380</span><br><span class="line">381</span><br><span class="line">382</span><br><span class="line">383</span><br><span class="line">384</span><br><span class="line">385</span><br><span class="line">386</span><br><span class="line">387</span><br><span class="line">388</span><br><span class="line">389</span><br><span class="line">390</span><br><span class="line">391</span><br><span class="line">392</span><br><span class="line">393</span><br><span class="line">394</span><br><span class="line">395</span><br><span class="line">396</span><br><span class="line">397</span><br><span class="line">398</span><br><span class="line">399</span><br><span class="line">400</span><br><span class="line">401</span><br><span class="line">402</span><br><span class="line">403</span><br><span class="line">404</span><br><span class="line">405</span><br><span class="line">406</span><br><span class="line">407</span><br><span class="line">408</span><br><span class="line">409</span><br><span class="line">410</span><br><span class="line">411</span><br><span class="line">412</span><br><span class="line">413</span><br><span class="line">414</span><br><span class="line">415</span><br><span class="line">416</span><br><span class="line">417</span><br><span class="line">418</span><br><span class="line">419</span><br><span class="line">420</span><br><span class="line">421</span><br><span class="line">422</span><br><span class="line">423</span><br><span class="line">424</span><br><span class="line">425</span><br><span class="line">426</span><br><span class="line">427</span><br><span class="line">428</span><br><span class="line">429</span><br><span class="line">430</span><br><span class="line">431</span><br><span class="line">432</span><br><span class="line">433</span><br><span class="line">434</span><br><span class="line">435</span><br><span class="line">436</span><br><span class="line">437</span><br><span class="line">438</span><br><span class="line">439</span><br><span class="line">440</span><br><span class="line">441</span><br><span class="line">442</span><br><span class="line">443</span><br><span class="line">444</span><br><span class="line">445</span><br><span class="line">446</span><br><span class="line">447</span><br><span class="line">448</span><br><span class="line">449</span><br><span class="line">450</span><br><span class="line">451</span><br><span class="line">452</span><br><span class="line">453</span><br><span class="line">454</span><br><span class="line">455</span><br><span class="line">456</span><br><span class="line">457</span><br><span class="line">458</span><br><span class="line">459</span><br><span class="line">460</span><br><span class="line">461</span><br><span class="line">462</span><br><span class="line">463</span><br><span class="line">464</span><br><span class="line">465</span><br><span class="line">466</span><br><span class="line">467</span><br><span class="line">468</span><br><span class="line">469</span><br><span class="line">470</span><br><span class="line">471</span><br><span class="line">472</span><br><span class="line">473</span><br><span class="line">474</span><br><span class="line">475</span><br><span class="line">476</span><br><span class="line">477</span><br><span class="line">478</span><br><span class="line">479</span><br><span class="line">480</span><br><span class="line">481</span><br><span class="line">482</span><br><span class="line">483</span><br><span class="line">484</span><br><span class="line">485</span><br><span class="line">486</span><br><span class="line">487</span><br><span class="line">488</span><br><span class="line">489</span><br><span class="line">490</span><br><span class="line">491</span><br><span class="line">492</span><br><span class="line">493</span><br><span class="line">494</span><br><span class="line">495</span><br><span class="line">496</span><br><span class="line">497</span><br><span class="line">498</span><br><span class="line">499</span><br><span class="line">500</span><br><span class="line">501</span><br><span class="line">502</span><br><span class="line">503</span><br><span class="line">504</span><br><span class="line">505</span><br><span class="line">506</span><br><span class="line">507</span><br><span class="line">508</span><br><span class="line">509</span><br><span class="line">510</span><br><span class="line">511</span><br><span class="line">512</span><br><span class="line">513</span><br><span class="line">514</span><br><span class="line">515</span><br><span class="line">516</span><br><span class="line">517</span><br><span class="line">518</span><br><span class="line">519</span><br><span class="line">520</span><br><span class="line">521</span><br><span class="line">522</span><br><span class="line">523</span><br><span class="line">524</span><br><span class="line">525</span><br><span class="line">526</span><br><span class="line">527</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">  &lt;</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">class</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;SearchForm&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">    &lt;</span><span style="color: #85E89D">el-form</span></span>
<span class="line"><span style="color: #E1E4E8">        :</span><span style="color: #B392F0">inline</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">inline</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        :</span><span style="color: #B392F0">model</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">formData</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #B392F0">v-bind</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">$attrs</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;elFormRef&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        :</span><span style="color: #B392F0">disabled</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">disabled</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">    &gt;</span></span>
<span class="line"><span style="color: #E1E4E8">      &lt;</span><span style="color: #85E89D">el-row</span><span style="color: #E1E4E8"> :</span><span style="color: #B392F0">gutter</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #79B8FF">20</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">name</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;before&quot;</span><span style="color: #E1E4E8">&gt;&lt;/</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-for</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">(item, index) </span><span style="color: #F97583">in</span><span style="color: #E1E4E8"> searchFormColumn</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8"> :</span><span style="color: #B392F0">key</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.prop</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">          &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #F97583">!</span><span style="color: #E1E4E8">item.isHidden</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">            &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.insertSlot</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">              &lt;</span><span style="color: #85E89D">slot</span></span>
<span class="line"><span style="color: #E1E4E8">                  </span><span style="color: #B392F0">name</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;insertSlot&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                  :</span><span style="color: #B392F0">insertSlotProp</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.insertSlotProp</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">              &gt;&lt;/</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">            &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">            &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-else</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">              &lt;</span><span style="color: #85E89D">el-col</span><span style="color: #E1E4E8"> :</span><span style="color: #B392F0">span</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.span </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> formSpan</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                &lt;</span><span style="color: #85E89D">el-form-item</span></span>
<span class="line"><span style="color: #E1E4E8">                    :</span><span style="color: #B392F0">label</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.label</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                    :</span><span style="color: #B392F0">prop</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.prop</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                    </span><span style="color: #B392F0">v-bind</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                    :</span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #B392F0">setComponentRef</span><span style="color: #E1E4E8">(item?.ref)</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                    :</span><span style="color: #B392F0">rules</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">disabled</span><span style="color: #F97583">?</span><span style="color: #E1E4E8">[]</span><span style="color: #F97583">:</span><span style="color: #E1E4E8">item.rules</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                    </span><span style="color: #F97583">v-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.label</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                &gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> #</span><span style="color: #B392F0">label</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                    {{item.label}}</span></span>
<span class="line"><span style="color: #E1E4E8">                      &lt;</span><span style="color: #85E89D">el-tooltip</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #F97583">v-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.labelTip</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #B392F0">effect</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;light&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          :</span><span style="color: #B392F0">content</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.labelTip</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          :</span><span style="color: #B392F0">placement</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.labelTipPlacement </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&#39;top&#39;&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          :</span><span style="color: #B392F0">disabled</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #F97583">!</span><span style="color: #E1E4E8">item.labelTip</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                      &gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                        &lt;</span><span style="color: #85E89D">span</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.labelTip</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">style</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">vertical-align</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">bottom</span><span style="color: #E1E4E8">;</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                          &lt;</span><span style="color: #85E89D">el-icon</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                            &lt;</span><span style="color: #79B8FF">QuestionFilled</span><span style="color: #E1E4E8">/&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                          &lt;/</span><span style="color: #85E89D">el-icon</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                        &lt;/</span><span style="color: #85E89D">span</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                      &lt;/</span><span style="color: #85E89D">el-tooltip</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.type </span><span style="color: #F97583">===</span><span style="color: #E1E4E8"> FormTypeEnum.</span><span style="color: #79B8FF">SELECT</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &lt;</span><span style="color: #85E89D">el-select</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">style</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #79B8FF">width</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">100</span><span style="color: #F97583">%</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">v-model</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">formData[item.prop]</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">placeholder</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #F97583">!</span><span style="color: #E1E4E8">disabled</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #F97583">?</span><span style="color: #E1E4E8"> item.placeholder </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&#39;请选择&#39;</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">+</span><span style="color: #E1E4E8"> item.label</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&#39;&#39;</span></span>
<span class="line"><span style="color: #E1E4E8">                      </span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        @</span><span style="color: #B392F0">change</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">val</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">changeSelect</span><span style="color: #E1E4E8">(val, item)</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">empty-values</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">[</span><span style="color: #79B8FF">null</span><span style="color: #E1E4E8">, </span><span style="color: #79B8FF">undefined</span><span style="color: #E1E4E8">]</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">value-on-clear</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #79B8FF">null</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">v-bind</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.selectProps</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #B392F0">setComponentRef</span><span style="color: #E1E4E8">(item?.selectProps?.ref)</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">disabled</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.disabled </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> props.disabled</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                      &lt;</span><span style="color: #85E89D">el-option</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #F97583">v-for</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">option </span><span style="color: #F97583">in</span><span style="color: #E1E4E8"> item.options</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          :</span><span style="color: #B392F0">key</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">option.value</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          :</span><span style="color: #B392F0">label</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">option.label</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          :</span><span style="color: #B392F0">value</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">option.value</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #B392F0">v-bind</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">option</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                      /&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &lt;/</span><span style="color: #85E89D">el-select</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-else-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.type </span><span style="color: #F97583">===</span><span style="color: #E1E4E8"> FormTypeEnum.</span><span style="color: #79B8FF">SWITCH</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &lt;</span><span style="color: #85E89D">el-switch</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">v-model</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">formData[item.prop]</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">disabled</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.disabled </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> props.disabled</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        @</span><span style="color: #B392F0">change</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">val</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">changeSwitch</span><span style="color: #E1E4E8">(val, item)</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">v-bind</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.switchProps</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #B392F0">setComponentRef</span><span style="color: #E1E4E8">(item?.switchProps?.ref)</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                    /&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-else-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.type </span><span style="color: #F97583">===</span><span style="color: #E1E4E8"> FormTypeEnum.</span><span style="color: #79B8FF">RADIO</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &lt;</span><span style="color: #85E89D">el-radio-group</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">v-model</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">formData[item.prop]</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">disabled</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.disabled </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> props.disabled</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        @</span><span style="color: #B392F0">change</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">val</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">changeRadio</span><span style="color: #E1E4E8">(val, item)</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">v-bind</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.radioProps</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #B392F0">setComponentRef</span><span style="color: #E1E4E8">(item?.radioProps?.ref)</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                      &lt;</span><span style="color: #85E89D">el-radio</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #F97583">v-for</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">option </span><span style="color: #F97583">in</span><span style="color: #E1E4E8"> item.options</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          :</span><span style="color: #B392F0">key</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">option.value</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          :</span><span style="color: #B392F0">value</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">option.value</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #B392F0">v-bind</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">option</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                      &gt;{{ option.label }}</span></span>
<span class="line"><span style="color: #E1E4E8">                      &lt;/</span><span style="color: #85E89D">el-radio</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &lt;/</span><span style="color: #85E89D">el-radio-group</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-else-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.type </span><span style="color: #F97583">===</span><span style="color: #E1E4E8"> FormTypeEnum.</span><span style="color: #79B8FF">AUTOCOMPLETE</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &lt;</span><span style="color: #85E89D">el-autocomplete</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">v-model</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">formData[item.prop]</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">placeholder</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #F97583">!</span><span style="color: #E1E4E8">disabled</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #F97583">?</span><span style="color: #E1E4E8"> item.placeholder </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&#39;请输入&#39;</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">+</span><span style="color: #E1E4E8"> item.label</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&#39;&#39;</span></span>
<span class="line"><span style="color: #E1E4E8">                      </span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        @</span><span style="color: #B392F0">select</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">val</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">selectAutocomplete</span><span style="color: #E1E4E8">(val, item)</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">v-bind</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.autocompleteProps</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #B392F0">setComponentRef</span><span style="color: #E1E4E8">(item?.autocompleteProps?.ref)</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                    /&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-else-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.type </span><span style="color: #F97583">===</span><span style="color: #E1E4E8"> FormTypeEnum.</span><span style="color: #79B8FF">CASCADER</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &lt;</span><span style="color: #85E89D">el-cascader</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">v-model</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">formData[item.prop]</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">options</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.options</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">v-bind</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.cascaderProps</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #B392F0">setComponentRef</span><span style="color: #E1E4E8">(item?.cascaderProps?.ref)</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">placeholder</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #F97583">!</span><span style="color: #E1E4E8">disabled</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #F97583">?</span><span style="color: #E1E4E8"> item.placeholder </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&#39;请选择&#39;</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">+</span><span style="color: #E1E4E8"> item.label</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&#39;&#39;</span></span>
<span class="line"><span style="color: #E1E4E8">                      </span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        @</span><span style="color: #B392F0">change</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">val</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">changeCascader</span><span style="color: #E1E4E8">(val, item)</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                      &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> #</span><span style="color: #B392F0">empty</span><span style="color: #E1E4E8">&gt; 暂无数据&lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                      &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> #</span><span style="color: #B392F0">default</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">{ node, data }</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                        &lt;</span><span style="color: #85E89D">el-tooltip</span></span>
<span class="line"><span style="color: #E1E4E8">                            </span><span style="color: #B392F0">effect</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;light&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                            :</span><span style="color: #B392F0">content</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                            item.cascaderProps </span><span style="color: #F97583">&amp;&amp;</span></span>
<span class="line"><span style="color: #E1E4E8">                            item.cascaderProps.props </span><span style="color: #F97583">&amp;&amp;</span></span>
<span class="line"><span style="color: #E1E4E8">                            item.cascaderProps.props.label</span></span>
<span class="line"><span style="color: #E1E4E8">                              </span><span style="color: #F97583">?</span><span style="color: #E1E4E8"> data[item.cascaderProps.props.label]</span></span>
<span class="line"><span style="color: #E1E4E8">                              </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> data.label</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                            </span><span style="color: #B392F0">placement</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;top&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                            :</span><span style="color: #B392F0">disabled</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #F97583">!</span><span style="color: #E1E4E8">node.isShowTooltip</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                            :</span><span style="color: #B392F0">offset</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #79B8FF">6</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                            </span><span style="color: #B392F0">popper-class</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;SearchForm__cascader_popover&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        &gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                          &lt;</span><span style="color: #85E89D">div</span></span>
<span class="line"><span style="color: #E1E4E8">                              @</span><span style="color: #B392F0">mouseenter</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                              </span><span style="color: #B392F0">isShowTooltipVisibilityChange</span><span style="color: #E1E4E8">($event, node)</span></span>
<span class="line"><span style="color: #E1E4E8">                            </span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                              </span><span style="color: #B392F0">class</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;dialog__cascader_label sle&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                              </span><span style="color: #B392F0">style</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #79B8FF">max-width</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">200</span><span style="color: #F97583">px</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          &gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                            {{</span></span>
<span class="line"><span style="color: #E1E4E8">                              item.cascaderProps </span><span style="color: #F97583">&amp;&amp;</span></span>
<span class="line"><span style="color: #E1E4E8">                              item.cascaderProps.props </span><span style="color: #F97583">&amp;&amp;</span></span>
<span class="line"><span style="color: #E1E4E8">                              item.cascaderProps.props.label</span></span>
<span class="line"><span style="color: #E1E4E8">                                  </span><span style="color: #F97583">?</span><span style="color: #E1E4E8"> data[item.cascaderProps.props.label]</span></span>
<span class="line"><span style="color: #E1E4E8">                                  </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> data.label</span></span>
<span class="line"><span style="color: #E1E4E8">                            }}</span></span>
<span class="line"><span style="color: #E1E4E8">                          &lt;/</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                        &lt;/</span><span style="color: #85E89D">el-tooltip</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                      &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &lt;/</span><span style="color: #85E89D">el-cascader</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-else-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.type </span><span style="color: #F97583">===</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&#39;datetimerange&#39;&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &lt;</span><span style="color: #79B8FF">Datetimerange</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">disabled</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.disabled </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> props.disabled</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">v-model</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">formData[item.prop]</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">only-history</span></span>
<span class="line"><span style="color: #E1E4E8">                        @</span><span style="color: #B392F0">change</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">changeDateTime</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        @</span><span style="color: #B392F0">clear</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">changeDateTime</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                    /&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-else-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.type </span><span style="color: #F97583">===</span><span style="color: #E1E4E8"> FormTypeEnum.</span><span style="color: #79B8FF">DATETIME</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &lt;</span><span style="color: #79B8FF">Datetimerange</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">disabled</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.disabled </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> props.disabled</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">v-model</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">formData[item.prop]</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">type</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;datetime&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">v-bind</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.datetimerangeProps</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #B392F0">setComponentRef</span><span style="color: #E1E4E8">(item?.datetimerangeProps?.ref)</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">placeholder</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #F97583">!</span><span style="color: #E1E4E8">disabled</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #F97583">?</span><span style="color: #E1E4E8"> item.placeholder </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&#39;请选择&#39;</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">+</span><span style="color: #E1E4E8"> item.label</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&#39;&#39;</span></span>
<span class="line"><span style="color: #E1E4E8">                      </span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        @</span><span style="color: #B392F0">change</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">changeDateTime</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        @</span><span style="color: #B392F0">clear</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">changeDateTime</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                    /&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-else-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.type </span><span style="color: #F97583">===</span><span style="color: #E1E4E8"> FormTypeEnum.</span><span style="color: #79B8FF">HTML</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &lt;</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">v-html</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.renderHtmlFunc</span><span style="color: #F97583">?</span><span style="color: #E1E4E8">item.</span><span style="color: #B392F0">renderHtmlFunc</span><span style="color: #E1E4E8">(formData[item.prop],item,formData) </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> formData[item.prop]</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;&lt;/</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-else-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.slot</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &lt;</span><span style="color: #85E89D">slot</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">name</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;slot&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">row</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">formData</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">column</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">value</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">formData[item.prop]</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &gt;&lt;/</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-else</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &lt;</span><span style="color: #85E89D">el-tooltip</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">effect</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;light&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">content</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">formData[item.prop]</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">placement</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;top&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        :</span><span style="color: #B392F0">disabled</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        item.type </span><span style="color: #F97583">==</span><span style="color: #E1E4E8"> FormTypeEnum.</span><span style="color: #79B8FF">TOOLTIP_INPUT</span><span style="color: #F97583">?</span></span>
<span class="line"><span style="color: #E1E4E8">                        (item.tooltipShowMaxLength</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #F97583">?</span></span>
<span class="line"><span style="color: #E1E4E8">                          (formData[item.prop]</span></span>
<span class="line"><span style="color: #E1E4E8">                              </span><span style="color: #F97583">?</span><span style="color: #E1E4E8"> formData[item.prop].</span><span style="color: #79B8FF">length</span></span>
<span class="line"><span style="color: #E1E4E8">                              </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">&lt;</span><span style="color: #E1E4E8"> item.tooltipShowMaxLength</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">false</span></span>
<span class="line"><span style="color: #E1E4E8">                          )</span><span style="color: #F97583">:</span><span style="color: #79B8FF">true</span></span>
<span class="line"><span style="color: #E1E4E8">                      </span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">popper-class</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;SearchForm__input_popover&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                        </span><span style="color: #B392F0">v-bind</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.tooltipProps</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                      &lt;</span><span style="color: #85E89D">el-input</span></span>
<span class="line"><span style="color: #E1E4E8">                          :</span><span style="color: #B392F0">disabled</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.disabled </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> props.disabled</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #B392F0">style</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #79B8FF">width</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">100</span><span style="color: #F97583">%</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #B392F0">v-model</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">formData[item.prop]</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          @</span><span style="color: #B392F0">input</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #FFAB70">val</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">newVal</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> item.inputTrim </span><span style="color: #F97583">?</span><span style="color: #E1E4E8"> val.</span><span style="color: #B392F0">trim</span><span style="color: #E1E4E8">() </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> val;</span></span>
<span class="line"><span style="color: #E1E4E8">                          formData[item.prop] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> newVal;</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #B392F0">changeInput</span><span style="color: #E1E4E8">(newVal, item);</span></span>
<span class="line"><span style="color: #E1E4E8">                        }</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #B392F0">clearable</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #B392F0">v-bind</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.inputProps</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          :</span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #B392F0">setComponentRef</span><span style="color: #E1E4E8">(item?.inputProps?.ref)</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                          :</span><span style="color: #B392F0">placeholder</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                            </span><span style="color: #F97583">!</span><span style="color: #E1E4E8">disabled</span></span>
<span class="line"><span style="color: #E1E4E8">                              </span><span style="color: #F97583">?</span><span style="color: #E1E4E8"> item.placeholder </span><span style="color: #F97583">||</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&#39;请输入&#39;</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">+</span><span style="color: #E1E4E8"> item.label</span></span>
<span class="line"><span style="color: #E1E4E8">                              </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&#39;&#39;</span></span>
<span class="line"><span style="color: #E1E4E8">                          </span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">                      /&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                    &lt;/</span><span style="color: #85E89D">el-tooltip</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                  &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">                &lt;/</span><span style="color: #85E89D">el-form-item</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">              &lt;/</span><span style="color: #85E89D">el-col</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">            &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">          &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8">&gt;&lt;/</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;</span><span style="color: #85E89D">el-col</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">showSelectAndResetButtonType</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8"> :</span><span style="color: #B392F0">span</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">formButtonSpan</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">          &lt;</span><span style="color: #85E89D">el-form-item</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">            &lt;</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">class</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;flex-only&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">              &lt;</span><span style="color: #85E89D">el-button</span><span style="color: #E1E4E8"> @</span><span style="color: #B392F0">click</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">selectData</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">type</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;primary&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">              &gt;查询</span><span style="color: #79B8FF">&amp;nbsp;</span><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">span</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">class</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;iconfont icon-search&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">              /&gt;&lt;/</span><span style="color: #85E89D">el-button</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">              &lt;</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">name</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;button_center&quot;</span><span style="color: #E1E4E8">&gt;&lt;/</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">              &lt;</span><span style="color: #85E89D">el-button</span><span style="color: #E1E4E8"> @</span><span style="color: #B392F0">click</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">resetData</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">              &gt;重置</span><span style="color: #79B8FF">&amp;nbsp;</span><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">span</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">class</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;iconfont icon-chongzhi&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">              /&gt;&lt;/</span><span style="color: #85E89D">el-button</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">            &lt;/</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">          &lt;/</span><span style="color: #85E89D">el-form-item</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;/</span><span style="color: #85E89D">el-col</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">      &lt;/</span><span style="color: #85E89D">el-row</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">    &lt;/</span><span style="color: #85E89D">el-form</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">  &lt;/</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">script</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">setup</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">lang</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;ts&quot;</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">name</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;SearchForm&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> Datetimerange </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@/components/Datetimerange/index.vue&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> {onMounted, ref, useTemplateRef, watch,nextTick} </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;vue&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">type</span><span style="color: #E1E4E8"> {FormColumnType} </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@/typings/column&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> {getFormColumnAsync, getFormColumnSync} </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@/utils/columnUtil&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> {isEmpty, isShowTooltipVisibilityChange} </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@/utils/util&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> FormTypeEnum </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@/enums/FormTypeEnum&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> {ElForm} </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;element-plus&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> {QuestionFilled} </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@element-plus/icons-vue&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">interface</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">SearchFormProps</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 表单数据</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">formData</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 表单列项</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">formColumn</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Array</span><span style="color: #E1E4E8">&lt;</span><span style="color: #B392F0">FormColumnType</span><span style="color: #E1E4E8">&gt;;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 24栅格化的间距</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">formSpan</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">number</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 按钮24栅格化的间距</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">formButtonSpan</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">number</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 是否启用同步处理表单列项</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">getFormColumnSyncType</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">boolean</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 显示查询和重置按钮</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">showSelectAndResetButtonType</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">boolean</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 是否行内</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">inline</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">boolean</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 是否禁用</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">disabled</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">boolean</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 是否异步处理</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">asyncFunc</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Function</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">// props</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">props</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">withDefaults</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">defineProps</span><span style="color: #E1E4E8">&lt;</span><span style="color: #B392F0">SearchFormProps</span><span style="color: #E1E4E8">&gt;(), {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">formColumn</span><span style="color: #E1E4E8">: () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> [],</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">formData</span><span style="color: #E1E4E8">: () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> ({}),</span></span>
<span class="line"><span style="color: #E1E4E8">  formSpan: </span><span style="color: #79B8FF">6</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  formButtonSpan: </span><span style="color: #79B8FF">2</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  getFormColumnSyncType: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  showSelectAndResetButtonType: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  inline: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  disabled: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">asyncFunc</span><span style="color: #E1E4E8">: () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  },</span></span>
<span class="line"><span style="color: #E1E4E8">});</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">// emits</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">emits</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">defineEmits</span><span style="color: #E1E4E8">([</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #9ECBFF">&quot;changeDateTime&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #9ECBFF">&quot;changeSelect&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #9ECBFF">&quot;changeSwitch&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #9ECBFF">&quot;changeRadio&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #9ECBFF">&quot;changeCascader&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #9ECBFF">&quot;changeInput&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #9ECBFF">&quot;selectSearchForm&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #9ECBFF">&quot;resetSearchForm&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #9ECBFF">&quot;selectAutocomplete&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">]);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">// 搜索表单列项</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">searchFormColumn</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">&lt;</span><span style="color: #B392F0">Array</span><span style="color: #E1E4E8">&lt;</span><span style="color: #B392F0">FormColumnType</span><span style="color: #E1E4E8">&gt;&gt;([]);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">// el表单实例</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">elFormRef</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">useTemplateRef</span><span style="color: #E1E4E8">&lt;</span><span style="color: #B392F0">InstanceType</span><span style="color: #E1E4E8">&lt;</span><span style="color: #F97583">typeof</span><span style="color: #E1E4E8"> ElForm&gt;&gt;(</span><span style="color: #9ECBFF">&quot;elFormRef&quot;</span><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">// 默认表单值</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">defaultFormData</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">({});</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">// 用于存储的组件实例</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">componentRefs</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">&lt;</span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">&gt;({});</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 初始化</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">init</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">initSearchFormColumn</span><span style="color: #E1E4E8">();</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 初始化搜索表单列项</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">initSearchFormColumn</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">async</span><span style="color: #E1E4E8"> () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (props.formColumn.</span><span style="color: #79B8FF">length</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">==</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">return</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (props.getFormColumnSyncType) {</span></span>
<span class="line"><span style="color: #E1E4E8">    searchFormColumn.value </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">await</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">getFormColumnSync</span><span style="color: #E1E4E8">(props.formColumn);</span></span>
<span class="line"><span style="color: #E1E4E8">  } </span><span style="color: #F97583">else</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    searchFormColumn.value </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> props.formColumn;</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #B392F0">getFormColumnAsync</span><span style="color: #E1E4E8">(searchFormColumn.value, props.asyncFunc);</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">  searchFormColumn.value.</span><span style="color: #B392F0">map</span><span style="color: #E1E4E8">((</span><span style="color: #FFAB70">column</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (column.</span><span style="color: #B392F0">hasOwnProperty</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;defaultValue&quot;</span><span style="color: #E1E4E8">)) {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #F97583">if</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">isEmpty</span><span style="color: #E1E4E8">(props.formData[column.prop])){</span></span>
<span class="line"><span style="color: #E1E4E8">        defaultFormData.value[column.prop] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> column.defaultValue;</span></span>
<span class="line"><span style="color: #E1E4E8">        props.formData[column.prop] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> column.defaultValue;</span></span>
<span class="line"><span style="color: #E1E4E8">      }</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  });</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 时间改变时触发</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">dates</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">changeDateTime</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> (</span><span style="color: #FFAB70">dates</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">emits</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;changeDateTime&quot;</span><span style="color: #E1E4E8">, dates, props.formData);</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 下拉列表选择时触发</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">val</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">column</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">changeSelect</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> (</span><span style="color: #FFAB70">val</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">column</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">FormColumnType</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">emits</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;changeSelect&quot;</span><span style="color: #E1E4E8">, val, column, props.formData);</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 单选时触发</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">val</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">column</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">changeSwitch</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> (</span><span style="color: #FFAB70">val</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">column</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">FormColumnType</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">emits</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;changeSwitch&quot;</span><span style="color: #E1E4E8">, val, column, props.formData);</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 单选时触发</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">val</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">column</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">changeRadio</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> (</span><span style="color: #FFAB70">val</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">column</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">FormColumnType</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">emits</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;changeRadio&quot;</span><span style="color: #E1E4E8">, val, column, props.formData);</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 自动完成选择时触发</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">val</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">column</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">selectAutocomplete</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> (</span><span style="color: #FFAB70">val</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">column</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">FormColumnType</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">emits</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;selectAutocomplete&quot;</span><span style="color: #E1E4E8">, val, column, props.formData);</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 级联选择器选择时触发</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">val</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">column</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">changeCascader</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> (</span><span style="color: #FFAB70">val</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">column</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">FormColumnType</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">emits</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;changeCascader&quot;</span><span style="color: #E1E4E8">, val, column, props.formData);</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 输入框失去焦点时触发</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">val</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">column</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">changeInput</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> (</span><span style="color: #FFAB70">val</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">column</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">FormColumnType</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">emits</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;changeInput&quot;</span><span style="color: #E1E4E8">, val, column, props.formData);</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 查询数据</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">selectData</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">emits</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;selectSearchForm&quot;</span><span style="color: #E1E4E8">, props.formData);</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 重置数据</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">resetData</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">emits</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;resetSearchForm&quot;</span><span style="color: #E1E4E8">, props.formData, defaultFormData.value);</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> *  设置表单列项</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">columns</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">setFormColumn</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> (</span><span style="color: #FFAB70">columns</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  searchFormColumn.value </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> columns;</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 设置组件引用函数</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">refName</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">setComponentRef</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> (</span><span style="color: #FFAB70">refName</span><span style="color: #F97583">:</span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> (</span><span style="color: #FFAB70">el</span><span style="color: #F97583">:</span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">if</span><span style="color: #E1E4E8">(</span><span style="color: #F97583">!</span><span style="color: #E1E4E8">refName) </span><span style="color: #F97583">return</span></span>
<span class="line"><span style="color: #E1E4E8">  componentRefs.value[refName] </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> el;</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 获取表单列项</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">getFormColumn</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> searchFormColumn.value;</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #B392F0">watch</span><span style="color: #E1E4E8">(</span></span>
<span class="line"><span style="color: #E1E4E8">    () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> props.formColumn,</span></span>
<span class="line"><span style="color: #E1E4E8">    () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #B392F0">init</span><span style="color: #E1E4E8">();</span></span>
<span class="line"><span style="color: #E1E4E8">    },</span></span>
<span class="line"><span style="color: #E1E4E8">    {immediate: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">, deep: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">}</span></span>
<span class="line"><span style="color: #E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #B392F0">onMounted</span><span style="color: #E1E4E8">(() </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">});</span></span>
<span class="line"></span>
<span class="line"><span style="color: #B392F0">defineExpose</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 获取el表单实例</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">getElFormRef</span><span style="color: #E1E4E8">: () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> elFormRef.value,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 获取组件引用</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">getComponentRef</span><span style="color: #E1E4E8">:(</span><span style="color: #FFAB70">key</span><span style="color: #F97583">:</span><span style="color: #79B8FF">string</span><span style="color: #E1E4E8">)</span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8">componentRefs.value[key],</span></span>
<span class="line"><span style="color: #E1E4E8">  setFormColumn,</span></span>
<span class="line"><span style="color: #E1E4E8">  getFormColumn,</span></span>
<span class="line"><span style="color: #E1E4E8">  resetData,</span></span>
<span class="line"><span style="color: #E1E4E8">});</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;/</span><span style="color: #85E89D">script</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">style</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">scoped</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">lang</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;scss&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #B392F0">.SearchForm</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  :</span><span style="color: #79B8FF">deep</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">.el-form</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">    &amp;.el</span><span style="color: #79B8FF">-</span><span style="color: #E1E4E8">form</span><span style="color: #FFAB70">--inline</span><span style="color: #E1E4E8">.el</span><span style="color: #79B8FF">-</span><span style="color: #E1E4E8">form</span><span style="color: #FFAB70">--label-top</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #79B8FF">width</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">100</span><span style="color: #F97583">%</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #B392F0">.el-row</span><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #79B8FF">width</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">100</span><span style="color: #F97583">%</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">      }</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #B392F0">.el-form-item</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #85E89D">&amp;</span><span style="color: #B392F0">.hide-required-asterisk</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #B392F0">.el-form-item__label</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">          </span><span style="color: #85E89D">&amp;</span><span style="color: #B392F0">::before</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #79B8FF">display</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">none</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">          }</span></span>
<span class="line"><span style="color: #E1E4E8">        }</span></span>
<span class="line"><span style="color: #E1E4E8">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #79B8FF">width</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">100</span><span style="color: #F97583">%</span><span style="color: #E1E4E8">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #B392F0">.el-date-editor</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #79B8FF">width</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">100</span><span style="color: #F97583">%</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #B392F0">.el-cascader</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #79B8FF">width</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">100</span><span style="color: #F97583">%</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">      }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #B392F0">.el-input-number</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #79B8FF">width</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">100</span><span style="color: #F97583">%</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">      }</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">  :deep(</span><span style="color: #B392F0">.el-row</span><span style="color: #E1E4E8">) {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #B392F0">.el-col-48</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #79B8FF">max-width</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">calc</span><span style="color: #E1E4E8">(</span><span style="color: #79B8FF">4.8</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">/</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">24</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">*</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">100</span><span style="color: #F97583">%</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #79B8FF">flex</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">calc</span><span style="color: #E1E4E8">(</span><span style="color: #79B8FF">4.8</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">/</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">24</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">*</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">100</span><span style="color: #F97583">%</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">    }</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;/</span><span style="color: #85E89D">style</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">style</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">lang</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;scss&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #B392F0">.SearchForm__input_popover</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">max-width</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">400</span><span style="color: #F97583">px</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #B392F0">.SearchForm__cascader_popover</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">min-width</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">auto</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">max-width</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">245</span><span style="color: #F97583">px</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;/</span><span style="color: #85E89D">style</span><span style="color: #E1E4E8">&gt;</span></span></code></pre></div></div></figure>
<h4 id="PageTable-index-vue"><a href="#PageTable-index-vue" class="headerlink" title="PageTable&#x2F;index.vue"></a><strong>PageTable&#x2F;index.vue</strong></h4><figure class="shiki vue"><div class='codeblock'><div class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br></pre></div><div class="code"><pre class="shiki github-dark"><code><span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">  &lt;</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">class</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;PageTable flex-only flex-d-c&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">    &lt;</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #F97583">!</span><span style="color: #E1E4E8">hideSearchForm</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">class</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;PageTable__form&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">      &lt;</span><span style="color: #79B8FF">SearchForm</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;SearchFormRef&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #B392F0">v-bind</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">$attrs</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        :</span><span style="color: #B392F0">form-data</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">formData</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        :</span><span style="color: #B392F0">form-column</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">formColumn</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        @</span><span style="color: #B392F0">selectSearchForm</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">getTableData</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        @</span><span style="color: #B392F0">resetSearchForm</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">resetFormData</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        :</span><span style="color: #B392F0">showSelectAndResetButtonType</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">showSelectAndResetButtonType</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">      &gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> #</span><span style="color: #B392F0">before</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">          &lt;</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">name</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;form-before&quot;</span><span style="color: #E1E4E8">&gt;&lt;/</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> #</span><span style="color: #B392F0">slot</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">scope</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">          &lt;</span><span style="color: #85E89D">slot</span></span>
<span class="line"><span style="color: #E1E4E8">            </span><span style="color: #B392F0">name</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;form-slot&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">            :</span><span style="color: #B392F0">row</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">scope.row</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">            :</span><span style="color: #B392F0">column</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">scope.column</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">            :</span><span style="color: #B392F0">value</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">scope.value</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">          &gt;&lt;/</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> #</span><span style="color: #B392F0">button_center</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">          &lt;</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">name</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;form-button_center&quot;</span><span style="color: #E1E4E8">&gt;&lt;/</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">name</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;form&quot;</span><span style="color: #E1E4E8">&gt;&lt;/</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">      &lt;/</span><span style="color: #79B8FF">SearchForm</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">    &lt;/</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">    &lt;</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">class</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;PageTable__top-right&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">      &lt;</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">name</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;top-right&quot;</span><span style="color: #E1E4E8">&gt;&lt;/</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">    &lt;/</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">    &lt;</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">class</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;PageTable__table flex-i&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">      &lt;</span><span style="color: #85E89D">el-table</span></span>
<span class="line"><span style="color: #E1E4E8">        :</span><span style="color: #B392F0">data</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">tableData</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #B392F0">height</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;100%&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        :</span><span style="color: #B392F0">tooltip-options</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">tooltipOptions</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #B392F0">stripe</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;elTableRef&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #B392F0">row-key</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;id&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #B392F0">v-bind</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">$attrs</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">      &gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">name</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;before&quot;</span><span style="color: #E1E4E8">&gt;&lt;/</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;</span><span style="color: #85E89D">el-table-column</span></span>
<span class="line"><span style="color: #E1E4E8">          </span><span style="color: #B392F0">fixed</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;left&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">          </span><span style="color: #F97583">v-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">selectionType</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">          :</span><span style="color: #B392F0">selectable</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">selectable</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">          </span><span style="color: #B392F0">type</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;selection&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">          </span><span style="color: #B392F0">width</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;55&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        /&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;</span><span style="color: #85E89D">el-table-column</span></span>
<span class="line"><span style="color: #E1E4E8">          </span><span style="color: #F97583">v-for</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">(item, index) </span><span style="color: #F97583">in</span><span style="color: #E1E4E8"> tableColumn</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">          :</span><span style="color: #B392F0">key</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.prop</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">          :</span><span style="color: #B392F0">prop</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.prop</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">          :</span><span style="color: #B392F0">width</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.width</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">          </span><span style="color: #B392F0">align</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;center&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">          </span><span style="color: #B392F0">v-bind</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">          :</span><span style="color: #B392F0">label</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;`${</span></span>
<span class="line"><span style="color: #9ECBFF">            </span><span style="color: #F97583">!</span><span style="color: #E1E4E8">item</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">unit</span><span style="color: #9ECBFF"> </span><span style="color: #F97583">?</span><span style="color: #9ECBFF"> </span><span style="color: #E1E4E8">item</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">label</span><span style="color: #9ECBFF"> </span><span style="color: #F97583">:</span><span style="color: #9ECBFF"> </span><span style="color: #E1E4E8">item</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">label</span><span style="color: #9ECBFF"> </span><span style="color: #F97583">+</span><span style="color: #9ECBFF"> </span><span style="color: #9ECBFF">&#39;(&#39;</span><span style="color: #9ECBFF"> </span><span style="color: #F97583">+</span><span style="color: #9ECBFF"> </span><span style="color: #E1E4E8">item</span><span style="color: #9ECBFF">.</span><span style="color: #E1E4E8">unit</span><span style="color: #9ECBFF"> </span><span style="color: #F97583">+</span><span style="color: #9ECBFF"> </span><span style="color: #9ECBFF">&#39;)&#39;</span></span>
<span class="line"><span style="color: #9ECBFF">          </span><span style="color: #9ECBFF">}`&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">          :</span><span style="color: #B392F0">show-overflow-tooltip</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">            item.showOverflowTooltip </span><span style="color: #F97583">==</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">undefined</span></span>
<span class="line"><span style="color: #E1E4E8">              </span><span style="color: #F97583">?</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">true</span></span>
<span class="line"><span style="color: #E1E4E8">              </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> item.showOverflowTooltip</span></span>
<span class="line"><span style="color: #E1E4E8">          </span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        &gt;</span></span>
<span class="line"><span style="color: #E1E4E8">          &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.type </span><span style="color: #F97583">==</span><span style="color: #E1E4E8"> FormTypeEnum.</span><span style="color: #79B8FF">HTML</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8"> #</span><span style="color: #B392F0">default</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">scope</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">            &lt;</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">class</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;sle&quot;</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">v-html</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.renderHtmlFunc</span><span style="color: #F97583">?</span><span style="color: #E1E4E8">item.</span><span style="color: #B392F0">renderHtmlFunc</span><span style="color: #E1E4E8">(scope.row[item.prop],item,scope.row) </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> scope.row[item.prop]</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;&lt;/</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">          &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">          &lt;</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">v-else-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item.slot</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8"> #</span><span style="color: #B392F0">default</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">scope</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">            &lt;</span><span style="color: #85E89D">slot</span></span>
<span class="line"><span style="color: #E1E4E8">              </span><span style="color: #B392F0">name</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;slot&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">              :</span><span style="color: #B392F0">row</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">scope.row</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">              :</span><span style="color: #B392F0">column</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">item</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">              :</span><span style="color: #B392F0">value</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">scope.row[item.prop]</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">              :</span><span style="color: #B392F0">index</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">index</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">              :$</span><span style="color: #B392F0">index</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;scope.$index&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">            &gt;&lt;/</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">          &lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;/</span><span style="color: #85E89D">el-table-column</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">        &lt;</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8">&gt;&lt;/</span><span style="color: #85E89D">slot</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">      &lt;/</span><span style="color: #85E89D">el-table</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">    &lt;/</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">    &lt;</span><span style="color: #85E89D">div</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #F97583">v-if</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #F97583">!</span><span style="color: #E1E4E8">hidePagination</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">      </span><span style="color: #B392F0">class</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;PageTable__pagination flex-only flex-j-e&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">    &gt;</span></span>
<span class="line"><span style="color: #E1E4E8">      &lt;</span><span style="color: #79B8FF">Pagination</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #B392F0">v-model</span><span style="color: #E1E4E8">:</span><span style="color: #B392F0">current-page</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">paginationState.currentPage</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        </span><span style="color: #B392F0">v-model</span><span style="color: #E1E4E8">:</span><span style="color: #B392F0">page-size</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">paginationState.pageSize</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        @</span><span style="color: #B392F0">size-change</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">getTableData</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        @</span><span style="color: #B392F0">current-change</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">getTableData</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">        :</span><span style="color: #B392F0">total</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;</span><span style="color: #E1E4E8">paginationState.total</span><span style="color: #9ECBFF">&quot;</span></span>
<span class="line"><span style="color: #E1E4E8">      /&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">    &lt;/</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">  &lt;/</span><span style="color: #85E89D">div</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;/</span><span style="color: #85E89D">template</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">script</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">setup</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">lang</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;ts&quot;</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">name</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;PageTable&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">type</span><span style="color: #E1E4E8"> { FormColumnType, TableColumnType } </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@/typings/column&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> SearchForm </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@/components/SearchForm/index.vue&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> Pagination </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@/components/Pagination/index.vue&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> { onMounted, reactive, ref } </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;vue&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> { deepClone } </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@/utils/util&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #F97583">import</span><span style="color: #E1E4E8"> FormTypeEnum </span><span style="color: #F97583">from</span><span style="color: #E1E4E8"> </span><span style="color: #9ECBFF">&quot;@/enums/FormTypeEnum&quot;</span><span style="color: #E1E4E8">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">interface</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">PageTableProps</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 表单列项</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">formColumn</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Array</span><span style="color: #E1E4E8">&lt;</span><span style="color: #B392F0">FormColumnType</span><span style="color: #E1E4E8">&gt;;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 表格数据</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">tableData</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Array</span><span style="color: #E1E4E8">&lt;</span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">&gt;;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 表格列项</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">tableColumn</span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Array</span><span style="color: #E1E4E8">&lt;</span><span style="color: #B392F0">TableColumnType</span><span style="color: #E1E4E8">&gt;;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 是否开启多选列</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">selectionType</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">boolean</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 多选列回调</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">selectable</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">Function</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 是否自动触发获取表格数据</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">autoGetTableDataStatus</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">boolean</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 是否展示查询和重置按钮</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">showSelectAndResetButtonType</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">boolean</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 是否隐藏表单</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">hideSearchForm</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">boolean</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 是否隐藏分页</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #FFAB70">hidePagination</span><span style="color: #F97583">?:</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">boolean</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">// props</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">props</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">withDefaults</span><span style="color: #E1E4E8">(</span><span style="color: #B392F0">defineProps</span><span style="color: #E1E4E8">&lt;</span><span style="color: #B392F0">PageTableProps</span><span style="color: #E1E4E8">&gt;(), {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">formColumn</span><span style="color: #E1E4E8">: () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> [],</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">tableData</span><span style="color: #E1E4E8">: () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> [],</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">tableColumn</span><span style="color: #E1E4E8">: () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> [],</span></span>
<span class="line"><span style="color: #E1E4E8">  selectionType: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">selectable</span><span style="color: #E1E4E8">: (</span><span style="color: #FFAB70">row</span><span style="color: #F97583">:</span><span style="color: #B392F0">Array</span><span style="color: #E1E4E8">&lt;</span><span style="color: #79B8FF">any</span><span style="color: #E1E4E8">&gt;,</span><span style="color: #FFAB70">index</span><span style="color: #F97583">:</span><span style="color: #79B8FF">number</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  autoGetTableDataStatus: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  showSelectAndResetButtonType: </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  hideSearchForm: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  hidePagination: </span><span style="color: #79B8FF">false</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">});</span></span>
<span class="line"></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">emits</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">defineEmits</span><span style="color: #E1E4E8">([</span><span style="color: #9ECBFF">&quot;resetFormData&quot;</span><span style="color: #E1E4E8">, </span><span style="color: #9ECBFF">&quot;getTableData&quot;</span><span style="color: #E1E4E8">]);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">// 表单数据</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">formData</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">({});</span></span>
<span class="line"><span style="color: #6A737D">// 表格提示标签</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">tooltipOptions</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">  placement: </span><span style="color: #9ECBFF">&quot;top&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  effect: </span><span style="color: #9ECBFF">&quot;light&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  popperClass: </span><span style="color: #9ECBFF">&quot;table-tooltip&quot;</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  offset: window.$wujie </span><span style="color: #F97583">?</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">66</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">:</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">-</span><span style="color: #79B8FF">1</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">});</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">// 分页state</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">paginationState</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">reactive</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 当前页</span></span>
<span class="line"><span style="color: #E1E4E8">  currentPage: </span><span style="color: #79B8FF">1</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 分页数量</span></span>
<span class="line"><span style="color: #E1E4E8">  pageSize: </span><span style="color: #79B8FF">20</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 总条数</span></span>
<span class="line"><span style="color: #E1E4E8">  total: </span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">,</span></span>
<span class="line"><span style="color: #E1E4E8">});</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">// el表格实例</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">elTableRef</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">();</span></span>
<span class="line"><span style="color: #6A737D">// 表单实例</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">SearchFormRef</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">ref</span><span style="color: #E1E4E8">();</span></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 初始化</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">init</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> (</span><span style="color: #FFAB70">autoGetTableDataStatus</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">true</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  paginationState.currentPage </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">1</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  paginationState.total </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  autoGetTableDataStatus </span><span style="color: #F97583">&amp;&amp;</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">getTableData</span><span style="color: #E1E4E8">();</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 重置表单</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">resetFormData</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> (</span><span style="color: #FFAB70">data</span><span style="color: #E1E4E8">, </span><span style="color: #FFAB70">defaultFormData</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  formData.value </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">deepClone</span><span style="color: #E1E4E8">(defaultFormData);</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">init</span><span style="color: #E1E4E8">();</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 获取表格数据</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">getTableData</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">emits</span><span style="color: #E1E4E8">(</span><span style="color: #9ECBFF">&quot;getTableData&quot;</span><span style="color: #E1E4E8">, {</span></span>
<span class="line"><span style="color: #E1E4E8">    formData: formData.value,</span></span>
<span class="line"><span style="color: #E1E4E8">    paginationState: paginationState,</span></span>
<span class="line"><span style="color: #E1E4E8">  });</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A737D">/**</span></span>
<span class="line"><span style="color: #6A737D"> * 设置表单数据</span></span>
<span class="line"><span style="color: #6A737D"> * </span><span style="color: #F97583">@param</span><span style="color: #6A737D"> </span><span style="color: #E1E4E8">data</span></span>
<span class="line"><span style="color: #6A737D"> */</span></span>
<span class="line"><span style="color: #F97583">const</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">setFormData</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> (</span><span style="color: #FFAB70">data</span><span style="color: #E1E4E8"> </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> </span><span style="color: #79B8FF">null</span><span style="color: #E1E4E8">) </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">if</span><span style="color: #E1E4E8"> (data) formData.value </span><span style="color: #F97583">=</span><span style="color: #E1E4E8"> { </span><span style="color: #F97583">...</span><span style="color: #E1E4E8">formData.value, </span><span style="color: #F97583">...</span><span style="color: #E1E4E8">data };</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #F97583">return</span><span style="color: #E1E4E8"> formData.value;</span></span>
<span class="line"><span style="color: #E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="color: #B392F0">onMounted</span><span style="color: #E1E4E8">(() </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">init</span><span style="color: #E1E4E8">(props.autoGetTableDataStatus);</span></span>
<span class="line"><span style="color: #E1E4E8">});</span></span>
<span class="line"></span>
<span class="line"><span style="color: #B392F0">defineExpose</span><span style="color: #E1E4E8">({</span></span>
<span class="line"><span style="color: #E1E4E8">  init,</span></span>
<span class="line"><span style="color: #E1E4E8">  setFormData,</span></span>
<span class="line"><span style="color: #E1E4E8">  getTableData,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 获取表单数据</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">getFormData</span><span style="color: #E1E4E8">: () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> formData.value,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 获取el表格实例</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">getElTableRef</span><span style="color: #E1E4E8">: () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> elTableRef.value,</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #6A737D">// 获取表单实例</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">getSearchFormRef</span><span style="color: #E1E4E8">: () </span><span style="color: #F97583">=&gt;</span><span style="color: #E1E4E8"> SearchFormRef.value,</span></span>
<span class="line"><span style="color: #E1E4E8">});</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;/</span><span style="color: #85E89D">script</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">style</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">scoped</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">lang</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;scss&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #B392F0">.PageTable</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">width</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">100</span><span style="color: #F97583">%</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">height</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">100</span><span style="color: #F97583">%</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">position</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">relative</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">.PageTable__top-right</span><span style="color: #E1E4E8">{</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">position</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">absolute</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">top</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">right</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">0</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">z-index</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">1</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #B392F0">.PageTable__pagination</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">    </span><span style="color: #79B8FF">padding-top</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">20</span><span style="color: #F97583">px</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  }</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;/</span><span style="color: #85E89D">style</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;</span><span style="color: #85E89D">style</span><span style="color: #E1E4E8"> </span><span style="color: #B392F0">lang</span><span style="color: #E1E4E8">=</span><span style="color: #9ECBFF">&quot;scss&quot;</span><span style="color: #E1E4E8">&gt;</span></span>
<span class="line"><span style="color: #B392F0">.table-tooltip</span><span style="color: #E1E4E8"> {</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">max-width</span><span style="color: #E1E4E8">: </span><span style="color: #79B8FF">350</span><span style="color: #F97583">px</span><span style="color: #E1E4E8">;</span></span>
<span class="line"><span style="color: #E1E4E8">  </span><span style="color: #79B8FF">color</span><span style="color: #E1E4E8">:</span><span style="color: #79B8FF">var</span><span style="color: #E1E4E8">(</span><span style="color: #FFAB70">--el-text-color-regular</span><span style="color: #E1E4E8">);</span></span>
<span class="line"><span style="color: #E1E4E8">}</span></span>
<span class="line"><span style="color: #E1E4E8">&lt;/</span><span style="color: #85E89D">style</span><span style="color: #E1E4E8">&gt;</span></span></code></pre></div></div></figure>


    
  </article>

  
      
    <div class="nexmoe-post-copyright">
        <strong>本文作者：</strong>tangyuxian<br>
        
        <strong>本文链接：</strong><a href="https://www.tangyuxian.com/2025/05/29/%E5%89%8D%E7%AB%AF/UI%E5%BA%93/UI%E5%BA%93-%E5%B0%81%E8%A3%85PageTable%E6%80%BB%E8%A7%88/" title="https:&#x2F;&#x2F;www.tangyuxian.com&#x2F;2025&#x2F;05&#x2F;29&#x2F;%E5%89%8D%E7%AB%AF&#x2F;UI%E5%BA%93&#x2F;UI%E5%BA%93-%E5%B0%81%E8%A3%85PageTable%E6%80%BB%E8%A7%88&#x2F;" target="_blank" rel="noopener">https:&#x2F;&#x2F;www.tangyuxian.com&#x2F;2025&#x2F;05&#x2F;29&#x2F;%E5%89%8D%E7%AB%AF&#x2F;UI%E5%BA%93&#x2F;UI%E5%BA%93-%E5%B0%81%E8%A3%85PageTable%E6%80%BB%E8%A7%88&#x2F;</a><br>

        
            <strong>版权声明：</strong>本文采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/cn/deed.zh" target="_blank">CC BY-NC-SA 3.0 CN</a> 协议进行许可

        
    </div>


  
  
  <div class="nexmoe-post-meta nexmoe-rainbow">
   
    
        <a class="nexmoefont icon-tag-fill -none-link" href="/tags/UI%E5%BA%93/" rel="tag">UI库</a> <a class="nexmoefont icon-tag-fill -none-link" href="/tags/elementPlus/" rel="tag">elementPlus</a> <a class="nexmoefont icon-tag-fill -none-link" href="/tags/%E5%8E%9F%E5%88%9B/" rel="tag">原创</a>
    
</div>
  
  
    <script async src="/js/copy-codeblock.js?v=1763992123952"></script>
  

  
      <div class="nexmoe-post-footer">
          <div class="valine"></div>
<script src='https://lib.baomitu.com/valine/1.3.9/Valine.min.js'></script>
<script>
  new Valine({
      el: '.valine',
      appId: 'r5zxC0st0DDjPA9auXzMV7HY-gzGzoHsz',
      appKey: '3bqCsovpyfTPHUzTHovd3V3V'
  })
</script>

      </div>
  
</div></div><div class="nexmoe-post-right">    <div class="nexmoe-fixed">
        <div class="nexmoe-tool">

            

            
            
            <button class="mdui-fab catalog" style="overflow:unset;">
                <i class="nexmoefont icon-i-catalog"></i>
                <div class="nexmoe-toc">
                    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%80-%E5%9F%BA%E7%A1%80%E5%B7%A5%E5%85%B7"><span class="toc-number">1.</span> <span class="toc-text">一 基础工具</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#FormTypeEnum-ts"><span class="toc-number">1.0.1.</span> <span class="toc-text">FormTypeEnum.ts</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#columnUtil-ts"><span class="toc-number">1.0.2.</span> <span class="toc-text">columnUtil.ts</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#column-d-ts"><span class="toc-number">1.0.3.</span> <span class="toc-text">column.d.ts</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8C-%E7%9B%B8%E5%85%B3%E7%BB%84%E4%BB%B6"><span class="toc-number">2.</span> <span class="toc-text">二 相关组件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#Pagination-index-vue"><span class="toc-number">2.0.1.</span> <span class="toc-text">Pagination&#x2F;index.vue</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#SearchForm-index-vue"><span class="toc-number">2.0.2.</span> <span class="toc-text">SearchForm&#x2F;index.vue</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#PageTable-index-vue"><span class="toc-number">2.0.3.</span> <span class="toc-text">PageTable&#x2F;index.vue</span></a></li></ol></li></ol></li></ol>
                </div>
            </button>
            

            

            <a href="#nexmoe-content" class="backtop toc-link" aria-label="Back To Top" title="top"><button class="mdui-fab mdui-ripple"><i class="nexmoefont icon-caret-top"></i></button></a>
        </div>
    </div>
</div></div><div id="nexmoe-pendant"><div class="nexmoe-drawer mdui-drawer nexmoe-pd" id="drawer">
    
        
            <div class="nexmoe-pd-item">
                <div class="clock">
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="needle" id="hours"></div>
        <div class="needle" id="minutes"></div>
        <div class="needle" id="seconds"></div>
        <div class="clock_logo">

        </div>

    </div>
<script>
        // ----- Variable declaration

        var data = {
                dt: new Date(),
                hours: {
                        el: document.querySelector('#hours'),
                        val: 0 },

                minutes: {
                        el: document.querySelector('#minutes'),
                        val: 0 },

                seconds: {
                        el: document.querySelector('#seconds'),
                        val: 0 },

                renderTime: 1000 };


        // ----- Clock rendering logic

        updateTime = () => {
                let hour = data.dt.getHours();
                let minute = data.dt.getMinutes();
                let second = data.dt.getSeconds();

                data.hours.el.classList.add('moving');
                data.minutes.el.classList.add('moving');
                data.seconds.el.classList.add('moving');

                data.hours.val = hour == 0 && data.hours.val == 59 * 6 * 5 ? 360 : hour * 6 * 5;
                data.minutes.val = minute == 0 && data.minutes.val == 59 * 6 ? 360 : minute * 6;
                data.seconds.val = second == 0 && data.seconds.val == 59 * 6 ? 360 : second * 6;

                data.hours.el.style.transform = `translate(-50%, -75%) rotate(${data.hours.val}deg)`;
                data.minutes.el.style.transform = `translate(-50%, -75%) rotate(${data.minutes.val}deg)`;
                data.seconds.el.style.transform = `translate(-50%, -75%) rotate(${data.seconds.val}deg)`;

                data.dt.setSeconds(second + 1);
        };

        // ----- Clock execution

        setInterval(() => {
                updateTime();
        }, data.renderTime);

        updateTime();

        // ----- Events area

        data.seconds.el.addEventListener('transitionend', () => {
                data.hours.el.classList.remove('moving');
                data.minutes.el.classList.remove('moving');
                data.seconds.el.classList.remove('moving');

                // if (data.hours.val == 360) {
                //   data.hours.el.style.transform = 'translate(-50%, -75%) rotate(0deg)';
                // }

                if (data.minutes.val == 360) {
                        data.minutes.el.style.transform = 'translate(-50%, -75%) rotate(0deg)';
                }

                if (data.seconds.val == 360) {
                        data.seconds.el.style.transform = 'translate(-50%, -75%) rotate(0deg)';
                }
        });

</script>
<style>
    .clock {
        background-color: #ffffff;
        width: 70vw;
        height: 70vw;
        max-width: 70vh;
        max-height: 70vh;
        border: solid 2.8vw var(--color-primary);
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        box-sizing: border-box;
        box-shadow: 0 1.4vw 2.8vw var(--color2);
        zoom:0.2
    }

    .memory {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;
    }

    .memory:nth-child(1) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(0deg) translateY(-520%);
    }

    .memory:nth-child(2) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(6deg) translateY(-1461%);
    }

    .memory:nth-child(3) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(12deg) translateY(-1461%);
    }

    .memory:nth-child(4) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(18deg) translateY(-1461%);
    }

    .memory:nth-child(5) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(24deg) translateY(-1461%);
    }

    .memory:nth-child(6) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(30deg) translateY(-520%);
    }

    .memory:nth-child(7) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(36deg) translateY(-1461%);
    }

    .memory:nth-child(8) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(42deg) translateY(-1461%);
    }

    .memory:nth-child(9) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(48deg) translateY(-1461%);
    }

    .memory:nth-child(10) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(54deg) translateY(-1461%);
    }

    .memory:nth-child(11) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(60deg) translateY(-520%);
    }

    .memory:nth-child(12) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(66deg) translateY(-1461%);
    }

    .memory:nth-child(13) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(72deg) translateY(-1461%);
    }

    .memory:nth-child(14) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(78deg) translateY(-1461%);
    }

    .memory:nth-child(15) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(84deg) translateY(-1461%);
    }

    .memory:nth-child(16) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(90deg) translateY(-520%);
    }

    .memory:nth-child(17) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(96deg) translateY(-1461%);
    }

    .memory:nth-child(18) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(102deg) translateY(-1461%);
    }

    .memory:nth-child(19) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(108deg) translateY(-1461%);
    }

    .memory:nth-child(20) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(114deg) translateY(-1461%);
    }

    .memory:nth-child(21) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(120deg) translateY(-520%);
    }

    .memory:nth-child(22) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(126deg) translateY(-1461%);
    }

    .memory:nth-child(23) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(132deg) translateY(-1461%);
    }

    .memory:nth-child(24) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(138deg) translateY(-1461%);
    }

    .memory:nth-child(25) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(144deg) translateY(-1461%);
    }

    .memory:nth-child(26) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(150deg) translateY(-520%);
    }

    .memory:nth-child(27) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(156deg) translateY(-1461%);
    }

    .memory:nth-child(28) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(162deg) translateY(-1461%);
    }

    .memory:nth-child(29) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(168deg) translateY(-1461%);
    }

    .memory:nth-child(30) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(174deg) translateY(-1461%);
    }

    .memory:nth-child(31) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(180deg) translateY(-520%);
    }

    .memory:nth-child(32) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(186deg) translateY(-1461%);
    }

    .memory:nth-child(33) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(192deg) translateY(-1461%);
    }

    .memory:nth-child(34) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(198deg) translateY(-1461%);
    }

    .memory:nth-child(35) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(204deg) translateY(-1461%);
    }

    .memory:nth-child(36) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(210deg) translateY(-520%);
    }

    .memory:nth-child(37) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(216deg) translateY(-1461%);
    }

    .memory:nth-child(38) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(222deg) translateY(-1461%);
    }

    .memory:nth-child(39) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(228deg) translateY(-1461%);
    }

    .memory:nth-child(40) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(234deg) translateY(-1461%);
    }

    .memory:nth-child(41) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(240deg) translateY(-520%);
    }

    .memory:nth-child(42) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(246deg) translateY(-1461%);
    }

    .memory:nth-child(43) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(252deg) translateY(-1461%);
    }

    .memory:nth-child(44) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(258deg) translateY(-1461%);
    }

    .memory:nth-child(45) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(264deg) translateY(-1461%);
    }

    .memory:nth-child(46) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(270deg) translateY(-520%);
    }

    .memory:nth-child(47) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(276deg) translateY(-1461%);
    }

    .memory:nth-child(48) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(282deg) translateY(-1461%);
    }

    .memory:nth-child(49) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(288deg) translateY(-1461%);
    }

    .memory:nth-child(50) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(294deg) translateY(-1461%);
    }

    .memory:nth-child(51) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(300deg) translateY(-520%);
    }

    .memory:nth-child(52) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(306deg) translateY(-1461%);
    }

    .memory:nth-child(53) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(312deg) translateY(-1461%);
    }

    .memory:nth-child(54) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(318deg) translateY(-1461%);
    }

    .memory:nth-child(55) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(324deg) translateY(-1461%);
    }

    .memory:nth-child(56) {
        background-color: var(--color-primary);
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(330deg) translateY(-520%);
    }

    .memory:nth-child(57) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(336deg) translateY(-1461%);
    }

    .memory:nth-child(58) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(342deg) translateY(-1461%);
    }

    .memory:nth-child(59) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(348deg) translateY(-1461%);
    }

    .memory:nth-child(60) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(354deg) translateY(-1461%);
    }

    .needle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;
    }

    .needle#hours {
        background-color: #1f1f1f;
        width: 4%;
        height: 30%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#hours.moving {
        transition: transform 150ms ease-out;
    }

    .needle#hours:after {
        content: '';
        background-color: #1f1f1f;
        width: 4vw;
        height: 4vw;
        max-width: 4vh;
        max-height: 4vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .needle#minutes {
        background-color: #1f1f1f;
        width: 2%;
        height: 45%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#minutes.moving {
        transition: transform 150ms ease-out;
    }

    .needle#minutes:after {
        content: '';
        background-color: #1f1f1f;
        width: 4vw;
        height: 4vw;
        max-width: 4vh;
        max-height: 4vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .needle#seconds {
        background-color: #cb2f2f;
        width: 1%;
        height: 50%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#seconds.moving {
        transition: transform 150ms ease-out;
    }

    .needle#seconds:after {
        content: '';
        background-color: #cb2f2f;
        width: 2.5vw;
        height: 2.5vw;
        max-width: 2.5vh;
        max-height: 2.5vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }
    .clock_logo{
        width: 10vw;
        height: 10vw;
        max-width: 10vh;
        max-height: 10vh;
        position: absolute;
        top: 50%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .clock_logo{
            width: 10vw;
            height: 10vw;
            max-width: 10vh;
            max-height: 10vh;
            position: absolute;
            top: 50%;
            left: 50%;
            box-sizing: border-box;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            background-image: var(--clock-logo);
            background-size: 100% 100%;
            background-repeat: no-repeat;
    }
    @media (min-width: 100vh) {
        .clock {
            border: solid 2.8vh var(--color-primary);
            box-shadow: 0 1.4vh 2.8vh var(--color2);
        }
    }

</style>





            </div>
        
            <div class="nexmoe-pd-item">
                <div class="qweather" >
    <div id="he-plugin-standard">
        <iframe allowtransparency="true" frameborder="0" width="304" height="96" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=2&z=1&t=0&v=0&d=2&bd=0&k=000000&f=ff8040&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=300&h=96&align=center"></iframe>
    </div>
    <div class="qweather-logo">

    </div>
</div>
<style>
    .qweather{
        position: relative;
        padding-right: 5px;
    }
    .qweather #he-plugin-standard {
        border: 2px solid var(--color-primary);
        box-shadow: 0 1px 0 0 var(--color-primary), 0 1px 2px 0 var(--color-primary);
        border-radius: 8px;
        width: 300px;
        overflow: hidden;
    }
    .qweather-logo{
        position: absolute;
        right: 0;
        top: -15px;
        width: 40px;
        height: 40px;
        background-image: var(--qweather-logo);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
</style>

            </div>
        
    
</div>
<style>
    .nexmoe-pd {
        left: auto;
        top: 40px;
        right: 0;
    }
    .nexmoe-pd-item{
       display: flex;
        justify-content: center;
        margin-bottom: 30px;
    }
    #nexmoe-pendant .mdui-drawer{
        width: 305px;
    }
    @media screen and (max-width: 1600px) {
        #nexmoe-pendant {
            display: none
        }
    }
</style>
</div><div id="nexmoe-footer"><!--!--></div><div id="nexmoe-search-space"><div class="search-container"><div class="search-header"><div class="search-input-container"><input class="search-input" type="text" placeholder="搜索" onInput="sinput();"></div><a class="search-close" onclick="sclose();">×</a></div><div class="search-body"></div></div></div><div></div><!-- hexo injector body_end start -->
<script src="https://cdn.jsdelivr.net/npm/hexo-shiki-plugin@latest/lib/codeblock.js"></script>

  <script>
  const CODE_CONFIG = {
    beautify: true,
    highlightCopy: true,
    highlightLang: true,
    highlightHeightLimit: null,
    isHighlightShrink: false,
    copy: {
      success: 'Copy Success',
      error: 'Copy Error',
      noSupport: 'Browser Not Support',
    }
  };
  console.log(
    `%c hexo-shiki-plugin %c v1.0.27 %c https://github.com/nova1751/hexo-shiki-plugin`,
    "color: #fff; background: #5f5f5f",
    "color: #fff; background: #80c8f8",
    ""
  );
  </script>
  <!-- hexo injector body_end end --><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"model":{"jsonPath":"/live2dw/assets/xiaomai.model.json"},"display":{"position":"left","width":200,"height":500},"mobile":{"show":false},"react":{"opacity":0.9},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body></html>